<template>
    <div class="table-box">
      <div class="table-search">
        <el-form :inline="true" :model="form">
          <el-form-item>
            <el-input v-model="form.chain_name" placeholder="链名称" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.address" placeholder="地址" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.is_used" placeholder="是否使用">
              <el-option key="0" label="未使用" value="0"></el-option>
              <el-option key="1" label="已使用" value="1"></el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" @click="onQuery">查询</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="card content-box">
        <div class="table">
          <el-table :data="tableData" border v-loading="loading">
            <el-table-column prop="id" label="ID" align="center" />
            <el-table-column prop="chain_name" label="链名称" align="center" />
            <el-table-column prop="address" label="地址" align="center" width="400" />
            <el-table-column label="是否被使用" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.is_used ? 'success' : 'danger'">{{
                scope.row.is_used ? "是" : "否"
              }}</el-tag>
            </template>
          </el-table-column>
            <el-table-column prop="batch_id" label="批次号" align="center" />
            <el-table-column prop="platform" label="平台" align="center" />
            <el-table-column prop="createtime" label="创建时间" align="center" :formatter="formatterTime" width="180" />
          </el-table>
          <div class="table-pagination">
            <el-pagination
              :current-page="pageable.pageNum"
              :page-size="pageable.pageSize"
              :page-sizes="[10, 25, 50, 100]"
              :background="true"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageable.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, reactive, computed } from "vue";
  import { formatterTime, formatter } from "@/utils/utils";
  import { addressLibraryApi } from "@/api/payServerse/wallet";
  const tableData = ref([]);
  const loading = ref(false);
  const formData = {
    chain_name: "",
    address: "",
    is_used: "",
    platform: ""
  };
  
  const form = reactive({ ...formData });
  // 参数
  const param = () => {
    return {
      page: pageable.pageNum,
      pagesize: pageable.pageSize,
      chain_name: form.chain_name,
      address: form.address,
      is_used: form.is_used,
      platform: form.platform
    };
  };
  
  const pageable = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0,
  });
  
  // 获取表格数据
  const getTbaleData = async () => {
    loading.value = true;
    try {
      const res = await addressLibraryApi(param());
      loading.value = false;
      tableData.value = res.data.results;
      pageable.total = res.data.count;
    } catch (error) {
      loading.value = false;
    }
  };
  // 重置
  const onReset = () => {
    Object.assign(form, formData);
  };
  // 查询
  const onQuery = async () => {
    getTbaleData();
  };
  // 条数
  const handleSizeChange = (number) => {
    pageable.pageSize = number;
    getTbaleData();
  };
  // 页码
  const handleCurrentChange = (number) => {
    pageable.pageNum = number;
    getTbaleData();
  };
  onMounted(() => {
    getTbaleData();
  });
  </script>
  